<!--
 * @Author: your name
 * @Date: 2021-08-06 21:13:03
 * @LastEditTime: 2021-08-06 22:37:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sxau-xxtx-ui-2021\src\views\components\Head.vue
-->
<template>
   <!-- 头部 -->
    <div class="header">
      <!-- 第一行 -->
      <div class="header_top">
        <!-- 容器居中显示 -->
        <div class="wrapper">
          <div class="left">
            <div class="logo" @click="toHomeHandler">
              <img src="../../assets/img-logo.png" alt="">
            </div>
          </div>
          <div class="right">
            <div class="search">
              <div><input type="textarea" class="search1" value="站内搜索..."></div>
              <div class="search1">搜索</div>
            </div>
            <!-- 显示当前时间 -->
            <div class="time">
              学校主页 
              {{nowDate}}
            </div>

          </div>
        </div>
      </div>
      <!-- 中间分界线 -->
      <div class="bod"></div>
      <!-- / 第一行 -->
      <!-- 第二行 -->
      <div class="header_main">
        <div class="wrapper" @click="returnTop()">
          
          <ul class="menu">
            <li :class="$route.query.name==c.name?'current':''" 
              v-for="c in categories" 
              @click="toListHandler(c)"  
              :key="c.id">{{c.name}}</li>
          </ul>
        </div>
      </div>
      <!-- /第二行 -->
    </div>
    <!-- /头部 -->
</template>
<script>
import { get } from '../../utils/request'
export default {
  data(){
      // 轮播图
      return{
        categories:[],
        loading:true,
        categoryArticles:[],
        nowDate: "", // 当前日期
    }
  },
  methods:{
    toHomeHandler(){
      this.$router.push({path:'/home'})
    },
    // 跳转
    toListHandler(category){
      // 跳转
      this.$router.push({
        path:'/list',
        query:category
      })
    },
    // 加载栏目信息
    loadCategories(){
      let url = '/index/category/findAll'
      get(url).then(resp => {
        this.categories = resp.data;
      })
    },
    // 时间方法
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    }
  },
  created(){
    this.loadCategories();
  },

  mounted() {
    this.currentTime();
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  }
  
}
</script>
<style lang="scss" scoped>
// 头部样式
$color_primary:#116581;
.header {
  width: 100%;
  .header_top {
    background-color: $color_primary;
    color: #fff;
    & > .wrapper::after {
      display:  block;
      content:'';
      clear:both;
    }
    .left,.right {
      line-height: 3em;
    }
    .left {
      
      float:left
    }
    .right {
      float: right;
      .search{
           display:flex;
           flex-direction: row;
           margin-top: 6px;
          input{
            height: 22px;
            margin-right: 6px;
          }
          & > .search1{
              width: 50px;
              height: 30px;
              margin-top: 6px;
              background-color:#023842;
              line-height: 30px;
              text-align: center;
          }
           & > .search1:hover{
              width: 50px;
              height: 30px;
              background-color:rgb(78, 126, 126);
              line-height: 30px;
              text-align: center;
          }
  
      }
    }

  }
  
  .header_main {
    padding: .5em 0 ;
    & > .wrapper {
     // width: 100%;
      display: flex;
      justify-content: space-between;
      position:relative;
    }
    .logo {
      cursor: pointer;
      .img {
        height:50px;
      }
    }
    ul.menu {
      color: $color_primary;
     margin: 0 auto;
      bottom: 0;
      right: 0;
      & > li {
        text-align: center;
        float: left;
        padding: 0 .5em;
        cursor: pointer;
      }
      & > li.current ,
      & > li:hover{
        background-color:$color_primary ;
        color:#fff;
      }
      
    }
  }
  .bod{
    border: 2px solid white;
    border-image: -webkit-linear-gradient(rgb(212, 203, 192), rgb(207, 224, 223)) 20 20;
    border-image: -moz-linear-gradient(rgb(233, 227, 220), rgb(204, 221, 220)) 20 20;
    border-image: -o-linear-gradient(rgb(223, 211, 199), rgb(199, 219, 218)) 20 20;
    border-image: linear-gradient(rgb(223, 211, 199), rgb(199, 219, 218)) 20 20;
    width: 100%;
    height: 5px;
  }
  
  
}
</style>